<template>
  <el-dialog
      top="5vh"
      width="1200px"
      title="SKU管理"
      :visible.sync="dialogValue"
      :close-on-click-modal="false"
      append-to-body
  >
    <div class="sku-container">
      <div class="product-info">
        <h3>{{ currentProduct.name }}</h3>
        <p>商品ID: {{ currentProduct.id }}</p>
      </div>
      
      <div class="sku-header">
        <el-button type="primary" size="mini" icon="el-icon-plus" @click="onAddSku">新增SKU</el-button>
      </div>
      
      <div class="sku-table">
        <el-table
            size="large"
            stripe
            border
            v-loading="loading"
            :data="skuList"
            row-key="id"
            element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(255, 255, 255, 0.8)"
        >
          <el-table-column prop="id" label="ID" width="80"/>
          <el-table-column prop="sku_code" label="SKU编码" width="150"/>
          <el-table-column prop="image" label="SKU图片" width="120">
            <template slot-scope="scope">
              <el-image
                  :preview-src-list="[scope.row.image]"
                  style="width: 80px; height: 80px"
                  :src="scope.row.image" fit="contain">
                <template #error>
                  <img src="@/assets/file.png" alt="" style="width: 80px; height: 80px">
                </template>
              </el-image>
            </template>
          </el-table-column>
          <el-table-column prop="spec_combination" label="规格组合" min-width="200">
            <template slot-scope="scope">
              <div v-if="scope.row.spec_combination">
                <el-tag 
                  v-for="(value, key) in JSON.parse(scope.row.spec_combination)" 
                  :key="key"
                  size="mini"
                  style="margin-right: 5px; margin-bottom: 5px;"
                >
                  {{ key }}: {{ value }}
                </el-tag>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="price" label="价格" width="100">
            <template slot-scope="scope">
              ¥{{ scope.row.price }}
            </template>
          </el-table-column>
          <el-table-column prop="original_price" label="原价" width="100">
            <template slot-scope="scope">
              ¥{{ scope.row.original_price }}
            </template>
          </el-table-column>
          <el-table-column prop="stock" label="库存" width="80"/>
          <el-table-column prop="unit" label="单位" width="80"/>
          <el-table-column prop="status" label="状态" width="100">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.status === 1" type="success">启用</el-tag>
              <el-tag v-else type="info">禁用</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" fixed="right" width="150">
            <template slot-scope="scope">
              <el-button type="text" @click="onEditSku(scope.row)">编辑</el-button>
              <el-button type="text" style="color: #F82222" @click="onDeleteSku(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <!-- SKU添加/编辑弹窗 -->
    <el-dialog
        top="10vh"
        width="600px"
        title="添加/编辑SKU"
        :visible.sync="skuDialogValue"
        :close-on-click-modal="false"
        append-to-body
    >
      <SubmitForm
          :rule-form="skuForm"
          :rules="skuRules"
          :form-list="skuFormList"
          @change="handleSkuFormChange"
          @save="onSaveSku"
          @close="skuDialogValue = false"
      />
    </el-dialog>
  </el-dialog>
</template>

<script>
import {http} from '@/api'

export default {
  name: 'SkuManager',
  data() {
    return {
      dialogValue: false,
      skuDialogValue: false,
      loading: false,
      currentProduct: {},
      skuList: [],
      skuForm: {},
      defaultSkuForm: {
        product_id: '',
        sku_code: '',
        spec_combination: '{}',
        price: 0.00,
        original_price: 0.00,
        stock: 0,
        image: '',
        unit: '',
        status: 1
      },
      skuRules: {
        sku_code: [{required: true, message: 'SKU编码不能为空'}],
        price: [{required: true, message: '价格不能为空'}],
      },
      skuFormList: [
        {
          label: 'SKU编码',
          prop: 'sku_code',
          name: 'input',
          colSpan: 24,
          placeholder: '请输入SKU编码'
        },
        {
          label: 'SKU图片',
          prop: 'image',
          name: 'file',
          colSpan: 24
        },
        {
          label: '规格组合',
          prop: 'spec_combination',
          name: 'input',
          colSpan: 24,
          placeholder: '请输入规格组合JSON，如：{"颜色":"红色","尺寸":"L"}'
        },
        {
          label: '价格',
          prop: 'price',
          name: 'number',
          colSpan: 12,
          min: 0,
          precision: 2,
          step: 0.01
        },
        {
          label: '原价',
          prop: 'original_price',
          name: 'number',
          colSpan: 12,
          min: 0,
          precision: 2,
          step: 0.01
        },
        {
          label: '库存',
          prop: 'stock',
          name: 'number',
          colSpan: 12,
          min: 0
        },
        {
          label: '单位',
          prop: 'unit',
          name: 'input',
          colSpan: 12,
          placeholder: '如：个、件、套'
        },
        {
          label: '状态',
          prop: 'status',
          name: 'switch',
          colSpan: 24,
          activeValue: 1,
          inactiveValue: 0,
          activeText: '启用',
          inactiveText: '禁用'
        },
      ]
    }
  },
  methods: {
    open(product) {
      this.currentProduct = product;
      this.dialogValue = true;
      this.loadSkuList();
    },
    loadSkuList() {
      this.loading = true;
      http.productSku.list({ product_id: this.currentProduct.id }).then(res => {
        this.skuList = res.data;
        this.loading = false;
      }).catch(() => {
        this.loading = false;
      });
    },
    onAddSku() {
      this.skuForm = {
        ...this.defaultSkuForm,
        product_id: this.currentProduct.id
      };
      this.skuDialogValue = true;
    },
    onEditSku(row) {
      this.skuForm = { ...row };
      this.skuDialogValue = true;
    },
    onDeleteSku(row) {
      this.$confirm('确定要删除这个SKU吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        http.productSku.delete(row.id).then(() => {
          this.$message.success('删除成功');
          this.loadSkuList();
        });
      });
    },
    handleSkuFormChange({key, val}) {
      // 处理SKU表单变化
    },
    onSaveSku() {
      // 验证规格组合JSON格式
      try {
        if (this.skuForm.spec_combination) {
          JSON.parse(this.skuForm.spec_combination);
        }
      } catch (e) {
        this.$message.error('规格组合JSON格式不正确');
        return;
      }
      
      http.productSku[this.skuForm.id ? 'update' : 'create'](this.skuForm.id, this.skuForm).then(res => {
        this.$message.success('操作成功');
        this.skuDialogValue = false;
        this.loadSkuList();
      });
    }
  }
}
</script>

<style scoped lang="scss">
.sku-container {
  .product-info {
    margin-bottom: 20px;
    padding: 15px;
    background-color: #f5f7fa;
    border-radius: 4px;
    
    h3 {
      margin: 0 0 10px 0;
      color: #303133;
    }
    
    p {
      margin: 0;
      color: #606266;
    }
  }
  
  .sku-header {
    margin-bottom: 20px;
  }
  
  .sku-table {
    max-height: 400px;
    overflow-y: auto;
  }
}
</style> 